<template>
	<view class="edit-page">
		<view class="contentBox">
			<view class="form-title">基本信息</view>
			<view class="form-list">
				<view class="form-item">
					<view class="title required">房源</view>
					<view class="value-box">
						<view class="value-info">{{roomAddress }}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">价格</view>
					<input v-model="dataForm.rent" placeholder="请输入租金" class="input" type="digit" />
					<view class="unit">元/月</view>
				</view>
				<view class="form-item">
					<view class="title required">标题 </view>
					<input v-model="dataForm.name" placeholder="请输入标题" class="input" />
				</view>
				<view class="form-item">
					<view class="title">朝向</view>
					<view class="value-box" @click="showFacePicker = true">
						<view class="value-info">{{dataForm.face?formatDataList(dataForm.face,faceTypeList[0]):'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title">装修</view>
					<view class="value-box" @click="showDecorationPicker = true">
						<view class="value-info">
							{{dataForm.decoration?formatDataList(dataForm.decoration,decorationTypeList[0]):'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title">押付方式</view>
					<view class="value-box" @click="showPaymentPicker = true">
						<view class="value-info">
							{{dataForm.payment_type?formatDataList(dataForm.payment_type,paymentTypeList[0]):'请选择'}}
						</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">位置</view>
					<view class="value-box" @click="selectLocation">
						<view class="value-info">{{dataForm.address?dataForm.address:'请选择房源位置'}}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">片区 </view>
					<input v-model="dataForm.region" placeholder="请输入片区" class="input" />
				</view>
				<view class="form-item">
					<view class="title required">社区</view>
					<view class="value-box" @click="showCommunity = true">
						<view class="value-info">
							{{dataForm.community?formatDataList(dataForm.community,columnsCommunity[0]):'请选择所在社区'}}
						</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title">联系电话</view>
					<input v-model="dataForm.mobile" placeholder="请输入联系电话" class="input" />
				</view>
			</view>
			<view class="select-box">
				<view class="select-title">
					<view class="title">房源照片</view>
					<view>{{ fileList1.length }}/8</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="8" width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
				<view class="select-title">
					<view class="title">封面图片</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="1"
						width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
				<view class="select-title">
					<view class="title">视频介绍</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList3" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
						name="3" accept="video" :maxCount="1" width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
			</view>
			<view class="form-title">房源简介</view>
			<view class="select-box">
				<view class="input-box">
					<input type="text" v-model="dataForm.intro" placeholder="请输入房源简介">
				</view>
			</view>
			<view class="form-title">入住须知</view>
			<view class="select-box">
				<view class="input-box">
					<input type="text" v-model="dataForm.notice" placeholder="请输入入住须知">
				</view>
			</view>
			<view class="fillBox" style="height: 150rpx;"></view>
			<view class="safe-bottom page-bottom">
				<view class="action-btn-group">
					<view class="action-btn" @click="$u.throttle(confirmSave, 2000)">保存</view>
				</view>
			</view>
		</view>
		<u-picker :show="showCommunity" :columns="columnsCommunity" @cancel="showCommunity = false"
			@confirm="confirmCommunity" keyName="name"></u-picker>
		<u-picker :show="showFacePicker" :columns="faceTypeList" keyName="name" @cancel="showFacePicker = false"
			@confirm="confirmSelectFace"></u-picker>
		<u-picker :show="showDecorationPicker" :columns="decorationTypeList" keyName="name"
			@cancel="showDecorationPicker = false" @confirm="confirmSelectDecoration"></u-picker>
		<u-picker :show="showPaymentPicker" :columns="paymentTypeList" keyName="name"
			@cancel="showPaymentPicker = false" @confirm="confirmSelectPayment"></u-picker>
	</view>
</template>

<script>
	import {
		houseModify,
		roomPublish,
		roomDetail,
		houseDetail,
	} from '@/api/landlord'
	import {
		getArea2,
	} from "@/api/gent.js";
	export default {
		data() {
			return {
				roomAddress: '', // 房源地址
				room_id: '', // 房间ID
				house_id: '', // 房源ID
				dataForm: {
					rent: "",
					address: "",
					payment_type: "",
					face: "",
					decoration: "",
					name: "",
					video: "",
					images: "",
					room_id: "",
					cover: "",
					region: "",
					intro: "",
					notice: "",
					lag: "",
					lng: ""
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				showCommunity: false, //是否显示社区
				showFacePicker: false,
				showDecorationPicker: false,
				showPaymentPicker: false,
				columnsCommunity: [], //社区列表
				faceTypeList: [
					[{
							name: "东",
							type: "东",
						},
						{
							name: "南",
							type: "南",
						},
						{
							name: "西",
							type: "西",
						},
						{
							name: "北",
							type: "北",
						},
						{
							name: "东西",
							type: "东西",
						},
						{
							name: "南北",
							type: "南北",
						},
						{
							name: "东南",
							type: "东南",
						},
						{
							name: "西南",
							type: "西南",
						},
						{
							name: "东北",
							type: "东北",
						},
						{
							name: "西北",
							type: "西北",
						},
					]
				],
				paymentTypeList: [
					[{
							name: "押一付一",
							type: "押一付一",
						},
						{
							name: "押一付二",
							type: "押一付二",
						}, {
							name: "押一付三",
							type: "押一付三",
						}, {
							name: "押二付一",
							type: "押二付一",
						}, {
							name: "押二付二",
							type: "押二付二",
						}, {
							name: "押二付三",
							type: "押二付三",
						}, {
							name: "押三付一",
							type: "押三付一",
						}, {
							name: "押零付一",
							type: "押零付一",
						}
					]
				],
				decorationTypeList: [
					[{
							name: "精装修",
							type: 1,
						},
						{
							name: "普通装修",
							type: 2,
						},
					]
				],
			}
		},
		onLoad(options) {
			if (options && options.room_id) {
				this.room_id = options.room_id
				this.getRoomDetail()
			}
			if (options && options.house_id) {
				this.house_id = options.house_id
				this.getHouseDetail()
			}
			this.getColumnsCommunity()
		},
		methods: {
			getColumnsCommunity() {
				getArea2({
					cid: 2,
				}).then(res => {
					var community = Object.entries(res.data.data).map(([key, value]) => ({
						name: value,
						type: key,
					}));
					this.columnsCommunity = [
						[...community]
					];
				})
			},
			confirmCommunity(event) {
				this.dataForm.community = event.value[0].type;
				this.showCommunity = false;
			},
			formatDataList(data, list) {
				if (!data || !list || !Array.isArray(list)) {
					return '';
				}
				const item = list.find(item => item.type == data);
				return item ? item.name : '';
			},

			selectLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						that.dataForm.region = res.address;
						that.dataForm.address = res.name;
						that.dataForm.lat = res.latitude;
						that.dataForm.lng = res.longitude;
						that.$forceUpdate()
					}
				});
			},
			// 选择朝向
			confirmSelectFace(event) {
				this.dataForm.face = event.value[0].type;
				this.showFacePicker = false;
			},
			// 选择装修
			confirmSelectDecoration(event) {
				this.dataForm.decoration = event.value[0].type;
				this.showDecorationPicker = false;
			},
			// 选择押付方式
			confirmSelectPayment(event) {
				this.dataForm.payment_type = event.value[0].type;
				this.showPaymentPicker = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.fullurl,
							img: result.url
						})
					);
					fileListLen++;
				}
			},
			// 获取房间详情
			getRoomDetail() {
				roomDetail({
					id: this.room_id
				}).then(res => {
					this.dataForm = res.data.data
					if (this.dataForm.house_id) {
						this.house_id = this.dataForm.house_id
						this.getHouseDetail()
					} else {
						this.dataForm.room_id = this.room_id
						this.dataForm.rent = res.data.data.price
						this.dataForm.floor = res.data.data.floor_no
						this.roomAddress = res.data.data.building.address + res.data.data.name
						this.dataForm.name = this.roomAddress + res.data.data.house_type
						if (res.data.data.images) {
							this.fileList1 = res.data.data.images.split(',').map(item => ({
								url: item,
								img: item,
							}));
							this.fileList2 = [this.fileList1[0]]
						}
					}
				})
			},
			// 获取房源详情
			getHouseDetail() {
				houseDetail({
					id: this.house_id
				}).then(res => {
					this.dataForm = res.data.data
					this.roomAddress = res.data.data.building.address + res.data.data.room_name
					if (this.dataForm.images.length > 0) {
						this.fileList1 = this.dataForm.images.map(item => ({
							url: item,
							img: item,
						}));
					}
					if (this.dataForm.cover) {
						this.fileList2 = [{
							url: this.dataForm.cover,
							img: this.dataForm.cover,
						}];
					}
					if (this.dataForm.video) {
						this.fileList3 = [{
							url: this.dataForm.video,
							img: this.dataForm.video,
						}];
					}
				})
			},
			// 提交信息
			confirmSave() {
				const payload = {
					...this.dataForm,
					images: this.fileList1.map(item => item.url),
					cover: this.fileList2[0]?.url || '',
					video: this.fileList3[0]?.url || '',
				};

				const apiCall = this.house_id ? houseModify : roomPublish;
				apiCall(payload).then(res => {
					this.$Tips({
						title: '保存房源成功'
					}, {
						url: '1',
						tab: 3
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.filter-modal {
		background: #fff;
		height: 30vh;
		border-radius: 40rpx 40rpx 0 0;
		overflow-y: scroll;

		.header {
			position: fixed;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx;
			box-sizing: border-box;
			height: 120rpx;
			border-radius: 40rpx 40rpx 0 0;
			border-bottom: 1px solid #eee;
			background: #ffffff;
			z-index: 100;

			.confirm {
				color: #FE4F04;
			}
		}

		.fill-box {
			height: 120rpx;
		}

		.section-box {
			padding: 0 20rpx;
			margin: 20rpx 0 40rpx;

			.title {
				font-size: 28rpx;
				color: #222222;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

		}

		.tags-box {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.tag-item {
				font-size: 28rpx;
				height: 68rpx;
				line-height: 68rpx;
				padding: 0rpx 50rpx;
				border-radius: 40rpx;
				background: #F5F6FA;
				border: 1rpx solid #F5F6FA;
			}

			.tag-item.active {
				color: #FF7D41;
				background: #FFF6ED;
				border: 1rpx solid #FE4F04;
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		z-index: 200;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;

		button {
			margin: unset;
			padding: unset;
			background-color: #ffffff;
		}

		button::after {
			border: none;
		}

		.icon-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #333333;
			margin-right: 48rpx;

			.label {
				font-size: 22rpx;
				color: #333333;
				margin-top: 6rpx;
			}
		}

		.action-btn-group {
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			flex: 1;

			.action-btn {
				width: 100%;
				height: 88rpx;
				background: #FE4F04;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
				font-weight: bold;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx
			}

		}
	}

	.edit-page {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F8FA;

		.contentBox {
			padding-bottom: 40rpx;
		}
	}

	.form-switch {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-title {
		font-weight: bold;
		font-size: 26rpx;
		color: #2A0C00;
		margin: 24rpx 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-list {
		padding: 34rpx 40rpx;
		border-radius: 16rpx;
		margin: 20rpx 32rpx;
		background: #FFFFFF;

		.form-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				width: 180rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.required::after {
				content: '*';
				color: #FE4F04;
				padding-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 28rpx;
				color: #222222;
				margin-left: 20rpx;
			}

			.input {
				flex: 1;
				text-align: right;
			}

			.value-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex: 1;
				margin-left: 10rpx;

				.value-info {
					font-size: 28rpx;
					color: #222222;
				}
			}

		}

		.form-item:last-child {
			border-bottom: 0;
		}
	}

	.select-box {
		background: #FFFFFF;
		padding: 34rpx 40rpx;
		border-radius: 16rpx;
		margin: 20rpx 32rpx;

		.input-box {
			font-weight: bold;
			font-size: 26rpx;
			color: #2A0C00;
		}

		.select-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			font-size: 26rpx;
			color: #2A0C00;
			margin-bottom: 20rpx;

			.icon-select {
				width: 48rpx;
				height: 48rpx;
			}

			.input {
				flex: 1;
				text-align: right;
			}
		}

		.select-list {
			.select-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				margin-top: 20rpx;

				.item-left {
					font-size: 28rpx;
					color: #666666;
				}

				.item-right {
					display: flex;
					align-items: center;

					.item-text {
						font-size: 28rpx;
						color: #222222;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>